<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章列表</title>
    <style>
        .row1 {
            color: red;
        }

        .row2 {
            color: aqua;
        }
    </style>
</head> -->

<!-- <body> -->

{% extends 'base.html' %}  <!-- 继承base.html的基础框架和样式等等 -->
{% block content %}  <!-- 把下面的内容填充到base.html的block占位符中 -->
    <h1>文章列表</h1>
    <h2>作者：{{ author }} 文章数量：{{ number }}</h2>
    <!-- <ul>
        <li>{{ acticle_list.0 }}</li>
        <li>{{ acticle_list.1 }}</li>
        <li>{{ acticle_list.2 }}</li>
    </ul> -->
    {% include 'page.html' %}
    {% for acticle in acticle_list %} <!-- 列表循环控制标签 -->
    <ul>
        <li>{{ acticle }}</li>
    </ul>
    {% empty %} <!-- 当数据为空的时候可以通过empty标签显示其他数据 -->
    <p>暂无数据</p>
    {% endfor %}

    <!-- <p>{{ info.name }} 年龄： {{ info.age }}</p>
    <p>喜欢的编程语言有：{{ info.programming_langauge }}</p> -->

    {% for key,value in info.items %} <!-- 字典循环控制标签 -->
    <!-- <p class="row1">{{ key }} : {{ value }}</p> -->
    <!-- 循环计数标签，用于循环当中
    forloop.first  如果是第一次迭代，为True
    forloop.last  如果是最后一次迭代，为True
    forloop.counter0  计数器，从0开始
    forloop.counter 计数器，从1开始
    -->
    <!-- <p class="{% cycle 'row1' 'row2' %}">{{ key }} : {{ value }} {{ forloop.counter }}</p> --> <!-- 采取重复循环标签，实现隔行换色 -->
    <p class="{% cycle 'row1' 'row2' %}">{{ key }} : {{ value }}
    {% if forloop.counter == 1 %}
    置顶
    {% elif forloop.counter == 2 %}
    沙发
    {% elif forloop.counter == 3 %}
    板凳
    {% endif %}
    </p> 
    {% endfor %}

    <!-- 常见的if标签 -->
    {% if info.age < 18 %}
    未成年
    {% elif 18 <= info.age and info.age <= 25 %}  <!-- 这里范围判断，不能像python那样连写，需要加 and -->
    青年才俊
    {% else %}
    潜力股
    {% endif %}

    <!-- 模板过滤器
    基础语法:
    <两个大括号> value | filter_name:params <两个大括号>
    PS: value 变量名称 filter_name 过滤器的名称 params 参数
    常用的过滤器:
    upper urlencode length
    default floatformat
    safe random truncatechars
    
    default 比如下面的性别，gender变量并没有定义（不存在），那么可以用default设定默认的值（参数）表示，如果不加default则为空
    -->
    <p>姓名大写： {{ info.name | upper }}</p>
    <p>性别： {{ gender|default:'未知' }}</p>
    <p>截取： {{ acticle_list.1 |truncatechars:10  }}</p>  <!-- truncatechars截取10个字符，超出部分...表示 -->
    <p>随机语言： {{ info.programming_langauge|random }}</p>  <!-- random 随机，每次刷新页面都会随机选择其中的一个 -->

    <!-- safe过滤器，如果不添加，django默认不会给富文本的html进行解析，而是字符串，添加后则自动解析成浏览器能识别并渲染出来 
     这个是django的安全机制，在确保富文本安全的情况下，才使用safe过滤器 -->
    <hr>
    {{ content|safe }}

    <!-- 通过include引用，也可以简化我们的代码量，无需继承和编写过多的html代码 -->
    {% include 'page.html' %}

{% endblock %}

<!-- </body>

</html> -->